﻿<%@ Page Language="C#" AutoEventWireup="false" CodeFile="recReconPaymentform.aspx.cs"
    Inherits="SIPO.Web.Forms.Transaction.recReconPaymentform" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Update Payment</title>
    <script src="<%= ResolveUrl("~/scripts/helper.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.validate.wrapper.js") %>" type="text/javascript"></script>
    <%-- Jquery stuffs start --%>
        <script src="<%= ResolveUrl("~/scripts/jquery.inputmask.bundle.min.js") %>" type="text/javascript"></script>
   
    <link type="text/css" rel="stylesheet" href="<%= ResolveUrl("~/styles/ui.jqgrid.css") %>" />
    <script type="text/javascript" src="<%= ResolveUrl("~/scripts/i18n/grid.locale-id.js") %>"></script>
    <script type="text/javascript" src="<%= ResolveUrl("~/scripts/jquery.jqGrid.min.js") %>"></script>
    <style type="text/css">
        .custom-combobox
        {
            position: relative;
            display: inline-block;
        }
        .custom-combobox-toggle
        {
            position: absolute;
            top: 0;
            bottom: 0;
            margin-left: -1px;
            padding: 0; /* support: IE7 */
            height: 1.7em;
            top: 0.1em;
        }
        .custom-combobox-input
        {
            margin: 0;
            padding: 0.3em;
        }
    </style>
    <script type="text/javascript" language="javascript">

        (function ($) {

            $.widget("custom.combobox", {
                _create: function () {
                    this.wrapper = $("<span>")
          .addClass("custom-combobox")
          .insertAfter(this.element);

                    this.element.hide();
                    this._createAutocomplete();
                    this._createShowAllButton();
                },

                _createAutocomplete: function () {
                    var selected = this.element.children(":selected"),
          value = selected.val() ? selected.text() : "";

                    var width = this.element.width() > 100 ? "style='width:" + this.element.width() + "px';" : "";

                    this.input = $("<input " + width + ">")
          .appendTo(this.wrapper)
          .val(value)
          .attr("title", "")
          .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
          .autocomplete({
              autoFocus: true,
              selectFirst: true,
              delay: 0,
              minLength: 0,
              source: $.proxy(this, "_source")
          })
          .tooltip({
              tooltipClass: "ui-state-highlight"
          });

                    this._on(this.input, {
                        autocompleteselect: function (event, ui) {
                            ui.item.option.selected = true;
                            this._trigger("select", event, {
                                item: ui.item.option
                            });

                            var idOfCaller = this.element.attr('id');
                            switch (idOfCaller.toLowerCase()) {
                                case ("ddlsector"):
                                    $('#ddlSector').change();
                                    break;
                                case ("ddlsubsector"):
                                    $('#ddlSubSector').change();
                                    break;
                                case ("ddlsubsubsector"):
                                    $('#ddlSubSubSector').change();
                                    break;
                                default:
                                    break;
                            }

                        },

                        autocompletechange: "_removeIfInvalid"
                    });
                },

                _createShowAllButton: function () {
                    var input = this.input,
          wasOpen = false;

                    $("<a>")
          .attr("tabIndex", -1)
          .attr("title", "Tamplikan Semua Item")
          .tooltip()
          .appendTo(this.wrapper)
          .button({
              icons: {
                  primary: "ui-icon-triangle-1-s"
              },
              text: false
          })
          .removeClass("ui-corner-all")
          .addClass("custom-combobox-toggle ui-corner-right")
          .mousedown(function () {
              wasOpen = input.autocomplete("widget").is(":visible");
          })
          .click(function () {
              input.focus();

              // Close if already visible
              if (wasOpen) {
                  return;
              }

              // Pass empty string as value to search for, displaying all results
              input.autocomplete("search", "");
          });
                },

                _source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                    response(this.element.children("option").map(function () {
                        var text = $(this).text();
                        if (this.value && (!request.term || matcher.test(text)))
                            return {
                                label: text,
                                value: text,
                                option: this
                            };
                    }));
                },

                _removeIfInvalid: function (event, ui) {

                    // Selected an item, nothing to do
                    if (ui.item) {
                        return;
                    }

                    // Search for a match (case-insensitive)
                    var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
                    this.element.children("option").each(function () {
                        if ($(this).text().toLowerCase() === valueLowerCase) {
                            this.selected = valid = true;
                            return false;
                        }
                    });

                    // Found a match, nothing to do
                    if (valid) {
                        return;
                    }

                    // Remove invalid value
                    this.input
          .val("")
          .attr("title", value + " tidak ditemukan")
          .tooltip("open");
                    this.element.val("");
                    this._delay(function () {
                        this.input.tooltip("close").attr("title", "");
                    }, 2500);
                    this.input.data("ui-autocomplete").term = "";
                },

                _destroy: function () {
                    this.wrapper.remove();
                    this.element.show();
                },
                autocomplete: function (value, text) {
                    this.element.val(value);
                    this.input.val(text);
                }
            });
        })(jQuery);


    </script>
    <script type="text/javascript">

        $("#btnSave").button({ icons: { primary: "ui-icon-disk"} });
        $("#btnClose").button({ icons: { primary: "ui-icon-close"} });

    </script>
    <script type="text/javascript">

        $(document).ready(function () {

            // 1. prepare the validation rules and messages.
            var rules = {
                txtJumlahPembayaran: {
                    required: true,
                    maxlength: 100
                },
                tbKeterangan : "required"
            };
            var messages = {
                txtJumlahPembayaran: {
                    required: "Kode tipe transaksi harus di isi"
                },
                tbKeterangan : "Keterangan harus di isi"
            };

            // 2. Initiate the validator
            var validator = new jQueryValidatorWrapper("form1", rules, messages);
            //txtMobile tidak boleh huruf dan karakter khusus
            //$("#txtJumlahPembayaran").inputmask("Regex", { regex: "[0-9]*" });

            $('#txtJumlahPembayaran').inputmask("decimal", { radixPoint: ",", autoGroup: true, groupSeparator: ".", groupSize: 3, digits: 2, repeat: 18 });
           
            $("#btnSave").click(function () {

                if (!validator.validate())
                    return;

                var lbTglInput = $('#lbTglInput').val();
                var lbNoInvoice = $('#lbNoInvoice').val();
                var lbNoPayment = $('#lbNoPayment').val();
                var tbKeterangan = $('#tbKeterangan').val();
                var txtJumlahPembayaran = $('#txtJumlahPembayaran').val();
                var Invoice = $('#<%= hfID.ClientID %>').val();

//                alert(lbTglInput + "==" +
//                lbNoInvoice + "==" +
//                lbNoPayment + "==" +
//                tbKeterangan + "==" +
//                txtJumlahPembayaran + "==" +
//                Invoice);


                var UpdatePayment = new Object();
                UpdatePayment.PaymentDate = lbTglInput;
                UpdatePayment.TransDate = lbTglInput;
                UpdatePayment.PaymentNo = lbNoPayment;
                UpdatePayment.InvoiceNo = Invoice;
                UpdatePayment.PaymentValue = txtJumlahPembayaran;
                UpdatePayment.Remark = tbKeterangan;

                jsonData = JSON.stringify(UpdatePayment);

                var handlerUrl = '<%= ResolveUrl("~/ajaxHandler/transaction/recReconhandler.ashx") %>';
                //alert(handlerUrl);
                CallAjax(handlerUrl, "?method=updatepayment", jsonData);

                parent.$('#dialog').dialog('close');

                setTimeout("parent.$('#table').trigger('reloadGrid');", 3000);

                return false;
            });
        });

    </script>
    <script type="text/javascript">

        $('#btnClose').click(function () {

            parent.$('#dialog').dialog('close');

            return false;
        });
        
         
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table border="0">
        <tr>
            <td>
                Tgl. Transaksi
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="lbTglInput" runat="server" Text="Label" BorderStyle="None"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                No. Payment
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="lbNoPayment" runat="server" Text="Label" BorderStyle="None"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td style="width: 50">
                No. Invoice
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="lbNoInvoice" runat="server" Text="Label" BorderStyle="None"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td style="width: 50">
                Nilai Invoice
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="txtJumlahPembayaran" runat="server" Style="text-align: right" Width="200"
                    MaxLength="100"></asp:TextBox>&nbsp;<span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td style="width: 50">
                Keterangan
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="tbKeterangan" runat="server" Width="200" MaxLength="100"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
            <td>
                <div style="text-align: right; padding-top: 10px;">
                    <button id="btnSave" type="button">
                        Simpan</button>
                    <button id="btnClose" type="button">
                        Batal</button>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
            <td>
                <asp:HiddenField ID="hfID" runat="server" />
            </td>
        </tr>
    </table>
    <div>
    </div>
    </form>
</body>
</html>
